<template>
  <div class="wrapper">
      <div class="box">
        <div class="title">
          您的订单信息
        </div>
        <ul class="list" v-show="!show">
            <li>
                <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                <div class="desc">
                    <h5>BCD牌精选东北大米</h5>
                    <span class="count">10件</span>
                    <span>25kg装</span>
                    <span class="money">￥250.00/件</span>
                </div>
            </li>
            <li>
                <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                <div class="desc">
                    <h5>BCD牌精选东北大米</h5>
                    <span class="count">10件</span>
                    <span>25kg装</span>
                    <span class="money">￥250.00/件</span>
                </div>
            </li>
            <li>
                <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                <div class="desc">
                    <h5>BCD牌精选东北大米</h5>
                    <span class="count">10件</span>
                    <span>25kg装</span>
                    <span class="money">￥250.00/件</span>
                </div>
            </li>
        </ul>
        <div class="total">
            <div class="left">
                <span>总计:</span>
                <span>30件</span>
            </div>
            <div class="left">
                <span>合计:</span>
                <span>￥10000.00</span>
            </div>
        </div>
      </div>
      <div class="box">
        <div class="title">
          实际生产商品变动
        </div>
        <ul class="list" v-show="!show">
            <li>
                <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                <div class="desc">
                    <h5>BCD牌精选东北大米</h5>
                    <span class="count">10件</span>
                    <span>25kg装</span>
                    <span class="money">￥250.00/件</span>
                </div>
            </li>
            <li>
                <div class="img"><img src="/static/images/img.jpg" alt=""></div>
                <div class="desc">
                    <h5>BCD牌精选东北大米</h5>
                    <span class="count">10件</span>
                    <span>25kg装</span>
                    <span class="money">￥250.00/件</span>
                </div>
            </li>
        </ul>
        <div class="total">
            <dis class="left">
                <span>总计:</span>
                <span>30件</span>
            </dis>
            <dis class="left">
                <span>合计:</span>
                <span>￥10000.00</span>
            </dis>
        </div>
      </div>
      <div class="pay">
        <p>您的支付变更为</p>
        <div class="total2">
            <div class="left">
                <span>支付/</span>
                <span>返还</span>
            </div>
            <div class="left">
                <span>￥1000.00/</span>
                <span>20.00</span>
            </div>
        </div>
        <div class="btn-wrapper">
          <a href="../refund/main" class="btn btn1">我要退单</a>
          <button class="btn btn2">线下支付</button>
          <button class="btn btn3">线上确认</button>
        </div>
      </div>
  </div>
</template>
<script>
export default {

}
</script>
<style lang="scss" scoped>
.wrapper{
  .box{
    border-bottom: 10rpx solid #f4f4f4;
    .title{
      height: 70rpx;
      line-height: 70rpx;
      font-size: 28rpx;
      background: #fff;
      padding: 0 20rpx;
    }
    .list{
        margin-top: 2rpx;
        color: #333;
        font-size: 26rpx;
        li{
            display: flex;
            background: #fff;
            padding: 10rpx 20rpx;
            margin-bottom: 4rpx;
            border-bottom: 1rpx solid #f9f9f9;
            .img{
                width: 230rpx;
                height: 160rpx;
                overflow: hidden;
                img{
                width: 100%;
                height: 100%;
                }
            }
            .desc{
                flex: 1;
                margin-left: 30rpx;
                position: relative;
                h5{
                  margin-bottom: 15rpx;
                }
                span{
                  color: #666;
                }
                .count{
                  position: absolute;
                  top: 0;
                  right: 0;
                }
                .money{
                  position: absolute;
                  bottom: 0;
                  right: 0;
                  color: #ed1c24;
                }
            }
        
        }
    }
    .total{
        display: flex;
        font-size: 28rpx;
        background: #fff;
        padding: 0 20rpx;
        .left{
            flex: 1;
            text-align: right;
            height: 80rpx;
            line-height: 80rpx;
            span{
                &:last-child{
                    color: #ed1c24;

                }
            }
        }
    }
  }
  .pay{
    font-size: 28rpx;
    background: #fff;
    padding: 0 20rpx;
    p{
      line-height: 60rpx;
    }
    .total2{
        display: flex;
        font-size: 28rpx;
        background: #fff;
        .left{
            flex: 1;
            text-align: right;
            height: 80rpx;
            line-height: 80rpx;
            span{
              color:#ed1c24;
                &:last-child{
                    color:#22ac38;;

                }
            }
        }
    }
    .btn-wrapper{
      position: relative;
      background: #fff;
      .btn{
        width: 188rpx;
        height: 60rpx;
        line-height: 60rpx;
        background: #ff9933;
        color: #fff;
        border-radius: 6rpx;
        text-align: center;
        border:none;
        font-size: 28rpx;
        position: absolute;
        top: 20rpx;
      }
      .btn3{
        right: 0;
        background:#22ac38;
      }
      .btn2{
        right: 218rpx;
        background:#ff9933;
      }
      .btn1{
        right: 438rpx;
        background:#cc3333;
      }
    }
  }
}
</style>
